{% extends "base.html" %}

{% set current_menu = 'system' %}
{% set current_page = 'user_detail' %}

{% block title %}系统管理 - 用户详情{% endblock %}

{% block page_title %}用户详情{% endblock %}
{% block page_subtitle %}查看用户信息和活动记录{% endblock %}

{% block content %}
<div class="container mx-auto">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('user.user_list') }}" class="text-gray-500 hover:text-gray-700">系统管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('user.user_list') }}" class="text-gray-500 hover:text-gray-700">用户管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">用户详情</li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 左侧用户信息卡片 -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow overflow-hidden">
                <!-- 用户头像和基本信息 -->
                <div class="bg-primary text-white p-6 text-center">
                    <div class="mx-auto h-24 w-24 rounded-full bg-white flex items-center justify-center mb-4">
                        {% if user.avatar %}
                        <img src="{{ user.avatar }}" alt="用户头像" class="h-24 w-24 rounded-full object-cover">
                        {% else %}
                        <i class="fas fa-user text-5xl text-primary"></i>
                        {% endif %}
                    </div>
                    <h2 class="text-xl font-bold">{{ user.name }}</h2>
                    <p class="text-blue-100">{{ user.position or '未设置职位' }}</p>
                    <div class="mt-2">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium 
                            {% if user.is_active %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                            {% if user.is_active %}活跃{% else %}禁用{% endif %}
                        </span>
                        {% if user.role == 'admin' %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800 ml-2">
                            管理员
                        </span>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 用户详细信息 -->
                <div class="p-6">
                    <h3 class="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
                    <dl class="space-y-3">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">用户名</dt>
                            <dd class="text-sm text-gray-900">{{ user.username }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">部门</dt>
                            <dd class="text-sm text-gray-900">{{ user.department or '未设置' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">职位</dt>
                            <dd class="text-sm text-gray-900">{{ user.position or '未设置' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">入职时间</dt>
                            <dd class="text-sm text-gray-900">{{ user.hire_date.strftime('%Y-%m-%d') if user.hire_date else '未设置' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">联系电话</dt>
                            <dd class="text-sm text-gray-900">{{ user.phone or '未设置' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">电子邮箱</dt>
                            <dd class="text-sm text-gray-900">{{ user.email or '未设置' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">创建时间</dt>
                            <dd class="text-sm text-gray-900">{{ user.created_at.strftime('%Y-%m-%d %H:%M') if user.created_at else '未知' }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">最后登录</dt>
                            <dd class="text-sm text-gray-900">{{ user.last_login.strftime('%Y-%m-%d %H:%M') if user.last_login else '从未登录' }}</dd>
                        </div>
                    </dl>
                    
                    <div class="mt-6 flex space-x-3">
                        <a href="{{ url_for('user.edit_user', user_id=user.id) }}" class="flex-1 inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                            <i class="fas fa-edit mr-2"></i> 编辑
                        </a>
                        <button id="reset-password-btn" class="flex-1 inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                            <i class="fas fa-key mr-2"></i> 重置密码
                        </button>
                    </div>
                    
                    <button id="toggle-status-btn" class="mt-3 w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white 
                        {% if user.is_active %}bg-red-600 hover:bg-red-700{% else %}bg-green-600 hover:bg-green-700{% endif %} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        <i class="fas {% if user.is_active %}fa-lock{% else %}fa-unlock{% endif %} mr-2"></i> 
                        {% if user.is_active %}禁用账号{% else %}启用账号{% endif %}
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 右侧用户权限和活动记录 -->
        <div class="lg:col-span-2 space-y-6">
            <!-- 用户权限 -->
            <div class="bg-white rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">用户权限</h3>
                </div>
                <div class="p-6">
                    <div class="mb-6">
                        <h4 class="text-md font-medium text-gray-800 mb-3">系统功能权限</h4>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                            {% for permission in system_permissions %}
                            <div class="flex items-center">
                                <i class="fas {% if permission in user_permissions %}fa-check-circle text-green-500{% else %}fa-times-circle text-red-500{% endif %} mr-2"></i>
                                <span class="text-sm text-gray-700">
                                    {% if permission == 'dashboard' %}查看仪表盘
                                    {% elif permission == 'project' %}项目管理
                                    {% elif permission == 'customer' %}客户管理
                                    {% elif permission == 'system' %}系统管理
                                    {% elif permission == 'report' %}报表统计
                                    {% elif permission == 'setting' %}系统设置
                                    {% else %}{{ permission }}
                                    {% endif %}
                                </span>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="text-md font-medium text-gray-800 mb-3">数据访问权限</h4>
                        <div class="bg-gray-50 p-4 rounded-md">
                            <div class="flex items-center">
                                <i class="fas fa-database text-primary mr-2"></i>
                                <span class="text-sm text-gray-700">
                                    {% if user_data_permission == 'all' %}全部数据
                                    {% elif user_data_permission == 'department' %}本部门数据
                                    {% elif user_data_permission == 'self' %}个人数据
                                    {% elif user_data_permission == 'custom' %}自定义数据
                                    {% else %}未设置
                                    {% endif %}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 用户活动记录 -->
            <div class="bg-white rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                    <h3 class="text-lg font-medium text-gray-900">活动记录</h3>
                    <div class="flex space-x-2">
                        <select id="activity-filter" class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                            <option value="all">全部类型</option>
                            <option value="login">登录</option>
                            <option value="create">创建</option>
                            <option value="update">更新</option>
                            <option value="delete">删除</option>
                            <option value="export">导出</option>
                            <option value="import">导入</option>
                        </select>
                        <select id="activity-period" class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                            <option value="7">最近7天</option>
                            <option value="30">最近30天</option>
                            <option value="90">最近90天</option>
                            <option value="all">全部</option>
                        </select>
                    </div>
                </div>
                <div class="overflow-hidden">
                    <div class="p-6">
                        <div class="flow-root">
                            <ul class="-mb-8" id="activity-list">
                                <!-- 活动记录将通过JavaScript动态加载 -->
                                <li class="text-center text-gray-500 py-8">
                                    <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
                                    <p>加载中...</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- 分页控件 -->
                    <div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    显示第 <span id="activity-start" class="font-medium">0</span> 至 <span id="activity-end" class="font-medium">0</span> 条，
                                    共 <span id="activity-total" class="font-medium">0</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" id="activity-pagination">
                                    <!-- 分页按钮将通过JavaScript动态生成 -->
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 重置密码模态框 -->
<div id="reset-password-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">重置用户密码</h3>
                <button id="close-reset-modal" class="text-gray-400 hover:text-gray-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="mb-4">
                <p class="text-sm text-gray-500 mb-3">请输入新密码，密码长度至少6位</p>
                <div class="mb-3">
                    <label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                    <input type="password" id="new-password" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                </div>
                <div class="mb-3">
                    <label for="confirm-new-password" class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                    <input type="password" id="confirm-new-password" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                </div>
                <div id="password-error" class="text-sm text-red-600 hidden"></div>
            </div>
            
            <div class="flex justify-end space-x-3">
                <button id="cancel-reset-password" class="px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 transition">
                    取消
                </button>
                <button id="confirm-reset-password" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                    确认重置
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 确认操作模态框 -->
<div id="confirm-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex items-center justify-center w-12 h-12 mx-auto bg-yellow-100 rounded-full mb-4">
                <i class="fas fa-exclamation-triangle text-yellow-600 text-xl"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 text-center mb-2" id="confirm-title">确认操作</h3>
            <p class="text-sm text-gray-500 text-center mb-4" id="confirm-message">您确定要执行此操作吗？</p>
            
            <div class="flex justify-center space-x-3">
                <button id="cancel-confirm" class="px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 transition">
                    取消
                </button>
                <button id="confirm-action" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                    确认
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ super() }}
<script>
    // 用户ID
    const userId = {{ user.id }};
    
    // 加载用户活动记录
    function loadUserActivities(page = 1, filter = 'all', period = '7') {
        const activityList = document.getElementById('activity-list');
        activityList.innerHTML = '<li class="text-center text-gray-500 py-8"><i class="fas fa-spinner fa-spin text-2xl mb-2"></i><p>加载中...</p></li>';
        
        // 模拟API调用
        setTimeout(() => {
            // 这里应该是实际的API调用
            // fetch(`/api/users/${userId}/activities?page=${page}&filter=${filter}&period=${period}`)
            //     .then(response => response.json())
            //     .then(data => {
            //         renderActivities(data.activities);
            //         renderPagination(data.pagination);
            //     })
            //     .catch(error => {
            //         console.error('Error loading activities:', error);
            //         activityList.innerHTML = '<li class="text-center text-gray-500 py-8"><p>加载失败，请重试</p></li>';
            //     });
            
            // 模拟数据
            const mockActivities = [
                { id: 1, type: 'login', description: '用户登录系统', time: '2023-06-15 09:30:22', ip: '192.168.1.100' },
                { id: 2, type: 'update', description: '更新了个人信息', time: '2023-06-14 16:45:10', ip: '192.168.1.100' },
                { id: 3, type: 'create', description: '创建了新项目 "内部OA系统优化"', time: '2023-06-14 10:20:35', ip: '192.168.1.100' },
                { id: 4, type: 'export', description: '导出了项目报表', time: '2023-06-13 15:12:48', ip: '192.168.1.100' },
                { id: 5, type: 'login', description: '用户登录系统', time: '2023-06-13 08:45:33', ip: '192.168.1.100' }
            ];
            
            const mockPagination = {
                page: page,
                per_page: 10,
                total: 25,
                total_pages: 3
            };
            
            renderActivities(mockActivities);
            renderPagination(mockPagination);
        }, 500);
    }
    
    // 渲染活动记录
    function renderActivities(activities) {
        const activityList = document.getElementById('activity-list');
        
        if (activities.length === 0) {
            activityList.innerHTML = '<li class="text-center text-gray-500 py-8"><p>暂无活动记录</p></li>';
            return;
        }
        
        activityList.innerHTML = activities.map(activity => {
            let iconClass = '';
            let iconColor = '';
            
            switch(activity.type) {
                case 'login':
                    iconClass = 'fa-sign-in-alt';
                    iconColor = 'text-green-500';
                    break;
                case 'create':
                    iconClass = 'fa-plus-circle';
                    iconColor = 'text-blue-500';
                    break;
                case 'update':
                    iconClass = 'fa-edit';
                    iconColor = 'text-yellow-500';
                    break;
                case 'delete':
                    iconClass = 'fa-trash-alt';
                    iconColor = 'text-red-500';
                    break;
                case 'export':
                    iconClass = 'fa-file-export';
                    iconColor = 'text-purple-500';
                    break;
                case 'import':
                    iconClass = 'fa-file-import';
                    iconColor = 'text-indigo-500';
                    break;
                default:
                    iconClass = 'fa-info-circle';
                    iconColor = 'text-gray-500';
            }
            
            return `
                <li>
                    <div class="relative pb-8">
                        <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"></span>
                        <div class="relative flex space-x-3">
                            <div>
                                <span class="h-8 w-8 rounded-full bg-gray-100 flex items-center justify-center ring-8 ring-white">
                                    <i class="fas ${iconClass} ${iconColor} text-sm"></i>
                                </span>
                            </div>
                            <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                <div>
                                    <p class="text-sm text-gray-800 font-medium">${activity.description}</p>
                                    <p class="text-xs text-gray-500 mt-1">IP: ${activity.ip}</p>
                                </div>
                                <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                    ${activity.time}
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            `;
        }).join('');
        
        // 更新分页信息
        document.getElementById('activity-start').textContent = '1';
        document.getElementById('activity-end').textContent = activities.length;
        document.getElementById('activity-total').textContent = '25';
    }
    
    // 渲染分页控件
    function renderPagination(pagination) {
        const paginationElement = document.getElementById('activity-pagination');
        let html = '';
        
        // 上一页按钮
        if (pagination.page > 1) {
            html += `<button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" onclick="loadUserActivities(${pagination.page - 1})">
                <i class="fas fa-chevron-left"></i>
            </button>`;
        } else {
            html += `<span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400">
                <i class="fas fa-chevron-left"></i>
            </span>`;
        }
        
        // 页码按钮
        for (let i = 1; i <= pagination.total_pages; i++) {
            if (i === pagination.page) {
                html += `<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                    ${i}
                </button>`;
            } else {
                html += `<button class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50" onclick="loadUserActivities(${i})">
                    ${i}
                </button>`;
            }
        }
        
        // 下一页按钮
        if (pagination.page < pagination.total_pages) {
            html += `<button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" onclick="loadUserActivities(${pagination.page + 1})">
                <i class="fas fa-chevron-right"></i>
            </button>`;
        } else {
            html += `<span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-gray-100 text-sm font-medium text-gray-400">
                <i class="fas fa-chevron-right"></i>
            </span>`;
        }
        
        paginationElement.innerHTML = html;
    }
    
    // 重置密码功能
    const resetPasswordModal = document.getElementById('reset-password-modal');
    const resetPasswordBtn = document.getElementById('reset-password-btn');
    const closeResetModal = document.getElementById('close-reset-modal');
    const cancelResetPassword = document.getElementById('cancel-reset-password');
    const confirmResetPassword = document.getElementById('confirm-reset-password');
    const newPasswordInput = document.getElementById('new-password');
    const confirmNewPasswordInput = document.getElementById('confirm-new-password');
    const passwordError = document.getElementById('password-error');
    
    resetPasswordBtn.addEventListener('click', () => {
        resetPasswordModal.classList.remove('hidden');
        newPasswordInput.value = '';
        confirmNewPasswordInput.value = '';
        passwordError.classList.add('hidden');
    });
    
    closeResetModal.addEventListener('click', () => {
        resetPasswordModal.classList.add('hidden');
    });
    
    cancelResetPassword.addEventListener('click', () => {
        resetPasswordModal.classList.add('hidden');
    });
    
    confirmResetPassword.addEventListener('click', () => {
        const newPassword = newPasswordInput.value;
        const confirmNewPassword = confirmNewPasswordInput.value;
        
        // 验证密码
        if (!newPassword) {
            passwordError.textContent = '请输入新密码';
            passwordError.classList.remove('hidden');
            return;
        }
        
        if (newPassword.length < 6) {
            passwordError.textContent = '密码长度不能少于6位';
            passwordError.classList.remove('hidden');
            return;
        }
        
        if (newPassword !== confirmNewPassword) {
            passwordError.textContent = '两次输入的密码不一致';
            passwordError.classList.remove('hidden');
            return;
        }
        
        // 模拟API调用
        // fetch(`/api/users/${userId}/reset-password`, {
        //     method: 'POST',
        //     headers: {
        //         'Content-Type': 'application/json',
        //         'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        //     },
        //     body: JSON.stringify({ password: newPassword })
        // })
        // .then(response => response.json())
        // .then(data => {
        //     if (data.success) {
        //         alert('密码重置成功');
        //         resetPasswordModal.classList.add('hidden');
        //     } else {
        //         passwordError.textContent = data.message || '密码重置失败';
        //         passwordError.classList.remove('hidden');
        //     }
        // })
        // .catch(error => {
        //     console.error('Error resetting password:', error);
        //     passwordError.textContent = '密码重置失败，请重试';
        //     passwordError.classList.remove('hidden');
        // });
        
        // 模拟成功
        showFlashMessage('密码重置成功', 'success');
        resetPasswordModal.classList.add('hidden');
    });
    
    // 切换用户状态功能
    const confirmModal = document.getElementById('confirm-modal');
    const toggleStatusBtn = document.getElementById('toggle-status-btn');
    const cancelConfirm = document.getElementById('cancel-confirm');
    const confirmAction = document.getElementById('confirm-action');
    const confirmTitle = document.getElementById('confirm-title');
    const confirmMessage = document.getElementById('confirm-message');
    
    toggleStatusBtn.addEventListener('click', () => {
        const isActive = {{ 'true' if user.is_active else 'false' }};
        
        if (isActive) {
            confirmTitle.textContent = '禁用账号';
            confirmMessage.textContent = '您确定要禁用该用户账号吗？禁用后用户将无法登录系统。';
        } else {
            confirmTitle.textContent = '启用账号';
            confirmMessage.textContent = '您确定要启用该用户账号吗？启用后用户将可以正常登录系统。';
        }
        
        confirmModal.classList.remove('hidden');
    });
    
    cancelConfirm.addEventListener('click', () => {
        confirmModal.classList.add('hidden');
    });
    
    confirmAction.addEventListener('click', () => {
        const isActive = {{ 'true' if user.is_active else 'false' }};
        
        // 模拟API调用
        // fetch(`/api/users/${userId}/toggle-status`, {
        //     method: 'POST',
        //     headers: {
        //         'Content-Type': 'application/json',
        //         'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        //     },
        //     body: JSON.stringify({ is_active: !isActive })
        // })
        // .then(response => response.json())
        // .then(data => {
        //     if (data.success) {
        //         alert(isActive ? '账号已成功禁用' : '账号已成功启用');
        //         location.reload();
        //     } else {
        //         alert(data.message || '操作失败，请重试');
        //     }
        // })
        // .catch(error => {
        //     console.error('Error toggling user status:', error);
        //     alert('操作失败，请重试');
        // });
        
        // 模拟成功
        showFlashMessage(isActive ? '账号已成功禁用' : '账号已成功启用', 'success');
        location.reload();
    });
    
    // 活动记录筛选
    const activityFilter = document.getElementById('activity-filter');
    const activityPeriod = document.getElementById('activity-period');
    
    activityFilter.addEventListener('change', () => {
        loadUserActivities(1, activityFilter.value, activityPeriod.value);
    });
    
    activityPeriod.addEventListener('change', () => {
        loadUserActivities(1, activityFilter.value, activityPeriod.value);
    });
    
    // 初始加载活动记录
    document.addEventListener('DOMContentLoaded', () => {
        loadUserActivities();
    });
</script>
{% endblock %}